<!DOCTYPE html>
<html>
<head>
	<title>拖拽</title>
	<style type="text/css">
		div {
			width: 400px;
			height: 400px;
			background: red;
			cursor: move;
		}
	</style>
</head>
<body>
<div>
	
</div>
</body>
<script type="text/javascript">
	
var div = document.getElementsByTagName('div')[0];

div.onmousedown = function(e) {
	var X = e.clientX - this.offsetLeft;
	var Y = e.clientY - this.offsetTop;
	div.onmousemove = function(e) {
		var x = e.clientX;
		var y = e.clientY;
		this.style.marginLeft = x - X + 'px';
		this.style.marginTop = y - Y + 'px';
	}
}
div.onmouseup = function() {
	// 移除鼠标移动的事件
	div.onmousemove = null;
}

</script>
</html>